﻿<!-- 教材管理-教材选择 -->

<style>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
</style>
<template>
    <div>
        <!-- 添加按钮 -->
        <div class="btn-add">
            <button type="button" class="btn btn-success btn-lg" @click="xzjc()"><i class="iconfont icon-chenggong ft12 mr5"></i>选择教材</button>
            <button type="button" class="btn btn-danger btn-lg" @click="delxqdata()"><i class="iconfont icon-chexiao ft12 mr5"></i>取消教材选择</button>
        </div>
        <!-- 按条件选择 -->



        <div class="tab-filter-type ">

            <div class="col-xs-3 padding20">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle">学期</button>
                    </div>
                    <base-xq :pzoption="query.xq"></base-xq>

                </div>
            </div>


            <div class="col-xs-3 padding20 hide">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle">选用状态</button>
                    </div>
                    <el-select placeholder="选用状态" size="mini" v-model="query.qrzt" class="form-control filter" style="height: 34px;padding:0px">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="已选" value="0"></el-option>
                        <el-option label="未选" value="1"></el-option>

                    </el-select>

                </div>
            </div>
        </div>
        <div class="default-tab ft14  hover-btn" style="overflow-x: inherit;padding:20PX;padding-top:10px">


            <base-table :pzoption="tableop" @selection-change="handleSelectionChange">
            </base-table>
        </div>

        <div class="modal fade" id="DModal" role="dialog">
            <div class="modal-dialog" role="document" style="width: 1000px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">选择教材</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">

                            <div class="form-group">
                                <label for="branchName" class="col-xs-2 control-label text-right">教师用书数量：</label>
                                <div class="col-xs-10">
                                    <div class="input-group">
                                        <el-input-number v-model="jssl" controls-position="right" :min="0" :max="100"></el-input-number>

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="branchName" class="col-xs-2 control-label text-right">已选教材：</label>
                                <div class="col-xs-10">
                                    <el-tag v-for="tag in seljc"
                                            :key="tag.isbn"
                                            @close="handleClose(tag)"
                                            closable
                                            type="success">
                                        {{tag.jcmc}}
                                    </el-tag>
                                    <div class="input-group">
                                        <!--<span style="line-height: 36px;font-weight:bolder" v-text="seljc.jcmc"></span>-->
                                        <!--<el-tag v-for="tag in seljc"
                                            :key="tag.isbn"
                                            closable
                                            type="success">
                                        {{tag.jcmc}}
                                    </el-tag>-->
                                    </div>
                                </div>
                            </div>
                            <pl-table :data="jcdataset.filter(data => !search || data.jcmc.toLowerCase().includes(search.toLowerCase()))" class="qjTable" height="350px" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" stripe border fit use-virtual big-data-checkbox>
                                <pl-table-column prop="jcmc" :width="340">
                                    <template slot="header" slot-scope="scope">
                                        <div style="padding:0px">
                                            教材名称
                                        </div>
                                        <el-input v-model="search"
                                                  size="mini"
                                                  placeholder="输入教材名称搜索" style="padding:0PX;width:200PX" />
                                    </template>
                                </pl-table-column>
                                <pl-table-column prop="isbn"
                                                 label="isbn">
                                </pl-table-column>

                                <pl-table-column prop="bzz"
                                                 label="编著">
                                </pl-table-column>
                                <pl-table-column prop="nf"
                                                 label="年份">
                                </pl-table-column>
                                <pl-table-column prop="cbs"
                                                 label="出版社">
                                </pl-table-column>
                                <pl-table-column prop="dj"
                                                 label="单价">
                                </pl-table-column>
                                <pl-table-column label="操作列" min-width="120" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="seljcf(scope.row)" type="success" size="mini">选择教材</el-button>
                                    </template>
                                </pl-table-column>
                            </pl-table>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-info" @click="SaveData()">确认</button>
                    </div>
                </div>
            </div>
        </div>



        <div class="modal fade" id="DModal1" role="dialog">
            <div class="modal-dialog" role="document" style="width: 1000px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">选择教材明细</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">

                          
                            <pl-table :data="seljcmxs" class="qjTable" height="350px" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" stripe border fit use-virtual big-data-checkbox>
                                <pl-table-column prop="jcmc" :width="340">
                                    <template slot="header" slot-scope="scope">
                                        <div style="padding:0px">
                                            教材名称
                                        </div>
                                    
                                    </template>
                                </pl-table-column>
                                <pl-table-column prop="jcdm"
                                                 label="教材代码">
                                </pl-table-column>

                                <pl-table-column prop="bzz"
                                                 label="编著">
                                </pl-table-column>
                                <pl-table-column prop="nf"
                                                 label="年份">
                                </pl-table-column>
                                <pl-table-column prop="cbs"
                                                 label="出版社">
                                </pl-table-column>
                                <pl-table-column prop="dj"
                                                 label="单价">
                                </pl-table-column>
                                
                            </pl-table>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格 -->



    </div>
</template>

<script>
    module.exports = {
        props: ['pdata'],
        components: {
            'base-table': httpVueLoader('/ViewV5/Base/Vue/Table.vue'),
            'base-xq': httpVueLoader('/ViewV5/AppPage/QJJW/component/conxq.vue'),
        },
        data: function () {
            return {
                search: "",
                kcdm: "",
                jssl: 0,
                seljcmxs:[],
                jcdataset: [],
                query: {
                    zc: "1",
                    qrzt: "",
                    xq: { value: "" },
                },
                js: { value: "" },
                alldata: [],
                seljc: [],
                tableop: {
                    title: "教材选用信息",
                    issel: true,
                    iscz: false,
                    height: 450,
                    isxh: true,
                    dataset: [],
                    loading: true,
                    multipleSelection: [],
                    czltabledata: [
                        {
                            colname: "教材详情", bttype: "primary", isshow: true, mangefun: function (rowdata) {
                                this.$parent.seljcmxs = rowdata.jcmx;
                                $('#DModal1').modal('show');

                            }
                        },
                    ],
                    collist: [
                        { colid: "kcmc", colname: "课程名称", isshow: true, istip: true },
                        { colid: "kcdm", colname: "课程代码", isshow: true, istip: true, nosort: true },
                        { colid: "skbj", colname: "上课班级", isshow: true, istip: true, nosort: true },
                        { colid: "bjrs", colname: "班级人数", isshow: true, istip: true, nosort: true },
                        { colid: "jcmc", colname: "选定教材名称", isshow: true, istip: true, width: 160, nosort: true },
                        { colid: "jsyssl", colname: "教师用书数量", isshow: true, istip: true, nosort: true },
                        { colid: "shqk", colname: "教研室审核情况", isshow: true, istip: true, nosort: true },
                        { colid: "xyshqk", colname: "学院审核情况", isshow: true, istip: true, nosort: true },
                        { colid: "jwcshqk", colname: "教务审核情况", isshow: true, istip: true, nosort: true },
                        //{ colid: "jcdm", colname: "ISBN", isshow: true, istip: true, nosort: true },
                        //{ colid: "bzz", colname: "编者", isshow: true, istip: true, nosort: true },
                        //{ colid: "nf", colname: "年份", isshow: true, istip: true, nosort: true },
                        //{ colid: "cbs", colname: "出版社", isshow: true, istip: true, nosort: true },
                        //{ colid: "dj", colname: "单价", isshow: true, istip: true, nosort: true }

                    ]
                }
            }
        },
        methods: {
            seljcf(row) {
                this.seljc=[];

                this.seljc.push(row);
            },
            handleClose(tag) {
                this.seljc.splice(this.seljc.indexOf(tag), 1);
            },
            handleSelectionChange(val) {
                this.tableop.multipleSelection = val;
            },
            xzjc: function () {
                var pro = this;
                var ids = [];
                var tgs = "";
                for (var i = 0; i < this.tableop.multipleSelection.length; i++) {
                    ids.push(this.tableop.multipleSelection[i].idn);
                    tgs = tgs + this.tableop.multipleSelection[i].shqk + this.tableop.multipleSelection[i].xyshqk + this.tableop.multipleSelection[i].jwcshqk;
                }
                if (ids.length == 0) {
                    this.$notify.error({
                        title: '错误',
                        message: '至少需要选择一条数据才能操作'
                    });
                    return;
                }
                if (tgs) {
                    this.$notify.error({
                        title: '错误',
                        message: '您不能操作已审核的教材选用信息！！'
                    });
                    return;
                }
                $('#DModal').modal('show');

            },
            SaveData: function () {
                var pro = this;
                if (pro.seljc.length > 0) {
                    var isbn = [];
                    for (var i = 0; i < pro.seljc.length; i++) {
                        isbn.push(pro.seljc[i].isbn);
                    }
                    $.getJSON('/API/VIEWAPI.ashx?Action=JCGL_SETJC', { P1: pro.query.xq.value, P2: JSON.stringify(pro.tableop.multipleSelection), jcdm: isbn.join(), jssl: pro.jssl }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            pro.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            pro.querydata();
                            $('#DModal').modal('hide');
                        }
                    })
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '请选择教材后才能操作'
                    });
                }


            },
            delxqdata: function () {
                var pro = this;
                if (pro.tableop.multipleSelection.length == 0) {
                    pro.$notify.error({
                        title: '错误',
                        message: '至少需要选择一条数据才能操作'
                    });
                    return;
                }
                var tgs = "";
                for (var i = 0; i < this.tableop.multipleSelection.length; i++) {
                    tgs = tgs + this.tableop.multipleSelection[i].shqk + this.tableop.multipleSelection[i].xyshqk + this.tableop.multipleSelection[i].jwcshqk;
                }
                if (tgs) {
                    this.$notify.error({
                        title: '错误',
                        message: '您不能操作已审核得教材选用信息！！'
                    });
                    return;
                }
                pro.$confirm('是否确认要删除选用信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.getJSON('/API/VIEWAPI.ashx?Action=JCGL_DELJCXYXX', { P1: pro.query.xq.value, P2: JSON.stringify(pro.tableop.multipleSelection) }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            pro.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            pro.querydata();
                        }
                    })
                }).catch(() => {
                    pro.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            querydata: function () {
                var pro = this;
                pro.tableop.loading = true;
                $.getJSON('/API/VIEWAPI.ashx?Action=JCGL_GETDXJC', { P1: pro.query.xq.value, P2: ComFunJS.getQueryString("xztype"), kcdm: ComFunJS.getQueryString("kcdm"), jsdm: ComFunJS.getQueryString("jsdm") }, function (resultData) {
                    if (!resultData.ErrorMsg) {
                        pro.tableop.dataset = resultData.Result;
                        pro.jcdataset = resultData.Result1;

                        pro.tableop.loading = false;

                    }
                })

            },

            InitWigetData: function () {
                this.querydata();
            },
        },
        watch: {
            'query': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var chi = this;
                    if (newV) {
                        chi.querydata();
                    }
                },
                deep: true
            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                //pro.InitWigetData();
            })

        }
    };
</script>